<template>
    <div class="e-form">
        <BillTop @cancel="onCancel"></BillTop>
        <div class="tabs">
            <div class="tabs-title" id="baseInfo">基本信息</div>
            <div style="width: 100%;" class="form">
                <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="240px">
                    <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构：">
                          {{formData.orgName}}
                        </el-form-item>
                    </el-col>
                        <el-col :span="12">
                            <el-form-item label="结算日期:" prop="settlementDate">
                                <el-date-picker
                                    v-model="formData.settlementDate"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    placeholder="请选择结算日期"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="传财务共享：">
                             <span :class="isFontColor ? 'redFont' : 'greenFont'">{{shareLable(0)}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态：">
                          草稿
                        </el-form-item>
                    </el-col>
                </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="冲产业工人工资" prop="writeOffWages">
                                <!-- {{ '从产业工人系统获取该分包商未冲销金额，可修改，但不能超' }} -->
                                <el-input
                                    placeholder="请输入冲产业工人工资"
                                    v-model="formData.writeOffWages"
                                    :max="formData.rmbWriteOffWages"
                                    type="number"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="本期结算内容概要">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容概要"
                                    v-model="formData.remarks"
                                    maxlength='500'
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="buttons">
            <el-button
                type="primary"
                style="background: #2e61d7"
                @click="onSave"
            >保存</el-button>
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</template>

<script>
import { addBaseInfo } from '@/api/settlementManagement/gongchengjieshuan/guochengjieshuan'
import { mapMutations, mapState } from 'vuex'
let oldRouter = {} // 上一个页面来源
export default {
    data () {
        return {
            //表单数据
            formData: {
                'baseCurExcludingDepositAmount': 0,
                'baseCurId': '',
                'baseCurIncludingDepositAmount': 0,
                'baseCurName': '',
                'baseCurRate': 0,
                'baseCurTaxAmount': 0,
                'baseCurTotalAmount': 0,
                'baseCurTotalBond': 0,
                'baseCurWriteOffWages': 0,
                'billId': '',
                'billNo': '',
                'contractId': '',
                'contractName': '',
                'currency': '',
                'currencyId': '',
                'currentTotalAmount': 0,
                'easId': '',
                'excludingDepositAmount': 0,
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'includingDepositAmount': 0,
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'outsourcerId': '',
                'outsourcerName': '',
                'period': 0,
                'previousTotalAmount': 0,
                'remarks': '',
                'rmbExcludingDepositAmount': 0,
                'rmbId': '',
                'rmbIncludingDepositAmount': 0,
                'rmbName': '',
                'rmbRate': 0,
                'rmbTaxAmount': 0,
                'rmbTotalAmount': 0,
                'rmbTotalBond': 0,
                'rmbWriteOffWages': 0,
                'settlementDate': '',
                'settlementType': 2,
                'state': '0',
                'taxAmount': 0,
                'taxRate': 0,
                'totalAmount': 0,
                'totalBond': 0,
                'workId': '',
                'writeOffWages': 0
            },
            rules: {
                settlementDate: [{ required: true, message: '请选择结算日期', trigger: ['blur', 'change'] }],
            },
            isFontColor: true, //传输财务共享颜色  未传，返回修改 红色   财务共享审核中，已传 绿色
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            shareFrom: state => state.equip.equipData.shareFrom,
        }),
        billId () {
            return this.$route.query.billid
        },
        //传输财务共享
        shareLable () {
            return param=> {
                const state = this.shareFrom
                const obj = state.find(x=>x.value === param)
                return (obj ?  obj.label :  '')
            }
        },
    },
    created () {
        this.getInInfo ()
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        //获取默认数据
        getInInfo () {
            const { orgInfo } = this.userInfo
            this.formData.orgId = orgInfo.orgId //机构id
            this.formData.orgName = orgInfo.orgName // 机构名称
        },
        //保存按钮
        onSave () {
            this.$refs['ruleForm'].validate(async valid => {
                if (valid) {
                    const data = await addBaseInfo(this.formData)
                    this.clientPop('info', '保存成功，是否继续？', () => {
                        this.$router.replace({
                            path: '/guochengZqJieshuanEdit',
                            query: {
                                billid: data,
                            }
                        })
                    }, null, () => {
                        this.$router.replace('/guochengZqJieshuanList')
                    })
                }
            })
        },
        //取消按钮
        onCancel () {
            if (oldRouter.path === '/guochengZqJieshuanList') {
                this.$router.back()
            } else {
                this.$router.replace('/guochengZqJieshuanList')
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}

.e-table {
    background: #fff;
}

.el-tab-pane {
    margin-left: -10px;
}
</style>
